<!DOCTYPE html>
<html lang="zh-ch" xmlns:th="http://www.thmeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>首页</title>

    <style>
        th{
            width: 200px;
        }
        .alsrtInfo {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 10;
            background: rgba(0, 0, 0, 0.1);}

        .profPrompt_test {
            padding: 30px 10px;
            width: 480px;
            overflow: hidden;
            line-height: 28px;
            border: 1px solid #4eb6d3;
            color: #4eb6d3;
            position: absolute;
            background-color: #fbfbfb;
            top: 356px;
            left: 50%;
            font-size: 14px;
            font-family: Gotham-Book;
            opacity: 1;
            /* z-index: 1; */
            text-align: center;
            transform: translate(-50%, -50%);
        }

    </style>
</head>
<body>
<div class="jumbotron text-center" style="margin-bottom:0">
    <h1>欢迎登录到 Leaf 系统</h1>
</div>

<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">网站名</a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">主页</a></li>
                <li><a href="/register.html">新用户注册</a></li>
                <li><a href="/logout">退出登录</a></li>
                <li><a href="/password-update.html">修改密码</a></li>
            </ul>
        </div>
    </div>
</nav>

<div class="container">

    <div class="row">
        <center><h1>用户详情列表</h1></center>
        <div id="app">
            <div v-if="true">
                <div class="text-center">
                    <table class="table table-bordered table-striped table-hover" style="width: 1600px">
                        <thead class="thead-dark">
                        <th align="center">用户名</th>
                        <th>真实姓名</th>
                        <th>性别</th>
                        <th>昵称</th>
                        <th align="center">电话</th>
                        <th>邮箱</th>
                        <th>地址</th>
                        <th>爱好</th>
                        <th>创建时间</th>
                        <th>修改时间</th>
                        </thead>
                        <tbody id="data1">
                        <tr v-for="(user,index) in users">
                            <td>{{user.username}}</td>
                            <td>{{user.realName}}</td>
                            <td>{{user.gender==1?"男":"女"}}</td>
                            <td>{{user.nickname}}</td>
                            <td>{{user.phone}}</td>
                            <td>{{user.email}}</td>
                            <td>{{user.address}}</td>
                            <td>{{user.hobby}}</td>
                            <td>{{user.gmtCreated}}</td>
                            <td>{{user.gmtModified}}</td>
                            <td><input type="button" @click="deleteUser(user)" value="删除用户"></td>
                            <td>

                            <td>
                                <select v-model="roleId"  id="role">
                                    <option value ="">请选择权限</option>
                                    <option value ="1356166256268546048">超级管理员</option>
                                    <option value="1356166256268546049">管理员</option>
                                    <option value="1356166256268546050">普通用户</option>
                                </select>
                            </td>
                            <td>
                                <input type="button" @click="updateUserRole(user)" value="修改权限"></td>
                            </td>

                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <ul class="pagination">
                <li><a href="#">&laquo;</a></li>
                <li class="active"><a href="#">1</a></li>
                <li class="disabled"><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">&raquo;</a></li>
            </ul>
        </div>
    </div>

</div>


</div>

<div class="jumbotron text-center" style="margin-bottom:0">
    <p>底部内容</p>
</div>
<script>
    let app = new Vue({
        el:'#app',
        data:{
            users:[],
            roleId:'',
            alertMsg:'',
            displayStatus:'none'
        },
        methods:{
            findAllUser:function () {
                // alert("aaaaaaaaaaaaa")
                let _this = this
                $.ajax({
                    url:'http://localhost:8080/api/user/selectUserAll',
                    success:function (r) {
                        console.info(r)
                        _this.users = r.data;
                    }
                });
            },
            deleteUser:function (user) {
                // let that = this
                $.ajax({
                    url:'http://localhost:8080/api/user/deleteUser',
                    type:'post',
                    dataType:"json",
                    data:{userId:user.id},
                    success:function (r) {
                        console.info(r);

                        // that.refresh();
                    }
                });
            },
            updateUserRole:function (user) {
                let roleId = this.roleId
                $.ajax({
                    url:'http://localhost:8080/api/user/updatePermission',
                    type:'post',
                    dataType:"json",
                    data:{userId:user.id,roleId:roleId},
                    success:function (r) {
                        console.info(r);
                        // that.refresh();
                    }
                });
            }
        },
        mounted:function () {
            this.findAllUser();
        }
    });
</script>
</body>
</html>